Skip to content

Add stacked toast notification component - #1359

Open
lovasoa wants to merge 7 commits into
mainfrom
ajouter-un-composant-toast
Open

Add stacked toast notification component#1359
lovasoa wants to merge 7 commits into
mainfrom
ajouter-un-composant-toast

Conversation

@lovasoa

@lovasoa lovasoa commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Motivation

  • Provide a built-in, accessible toast notification component for SQLPage with plain-text or Markdown content, icons, colors, placement, auto-dismiss timing, manual dismissal, and predictable stacking for streamed/fragment-loaded toasts.
  • Make toasts work correctly for both initial page loads and dynamically streamed fragments while remaining compatible with the existing Tabler/Bootstrap integration and SQLPage CSP constraints.

Description

  • Add a Handlebars template sqlpage/templates/toast.handlebars that renders a .toast element with data-pre-init="toast", supports title, description, description_md (Markdown takes precedence), icon, color, dismissible, duration, position, id, and class, and uses icon_img/markdown helpers and accessible attributes (role="status", aria-live="polite").
  • Add idempotent client-side initializer sqlpage_toast in sqlpage/sqlpage.js that normalizes position, creates/uses position-fixed .toast-container per placement, moves toasts into the shared container, normalizes duration, instantiates the framework toast (window.bootstrap || window.tabler.bootstrap), shows toasts, and removes generated containers when empty.
  • Add official-site documentation migration examples/official-site/sqlpage/migrations/76_toast.sql inserting the toast component, parameters, defaults, and multiple executable examples demonstrating stacking, Markdown, persistence, and alternate placement.
  • Add static rendering coverage tests/sql_test_files/component_rendering/toast.sql and a Playwright interaction spec addition in tests/end-to-end/official-site.spec.ts to validate visibility, stacking, timed/persistent behavior, dismissal, escaped vs. Markdown rendering, and placement, and update CHANGELOG.md accordingly.

Testing

  • npm run format completed successfully and formatted JS files as expected.
  • Migration/schema validation using sqlite3 ran and validated the new migration, confirming component/parameter/example rows and JSON validity for examples.
  • npx biome check/npm test were executed for the modified frontend files; the checks completed but the repository-wide Biome run surfaced unrelated pre-existing diagnostics (missing parseInt radix instances and several style warnings) that are outside the scope of this change.
  • cargo test was attempted but could not complete in this environment because building native libsqlite3-sys hit a Rust toolchain limitation (cfg_select unstable feature); Playwright end-to-end tests were not executed because the official-site server could not be started due to that build issue.

Codex Task

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5cd9d1129d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread sqlpage/sqlpage.js
Comment thread sqlpage/sqlpage.js
Comment thread sqlpage/templates/toast.handlebars Outdated
Comment thread tests/end-to-end/official-site.spec.ts Outdated
Comment thread sqlpage/sqlpage.js Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

https://github.com/sqlpage/SQLPage/blob/20f13342362d1db74f16ac0db0ab122b9f1d1b1e/sqlpage.js#L402
P2 Badge Dispose hidden toast instances before removing their elements

When automatic, non-triggered toasts are hidden, removing the DOM node without calling the Bootstrap instance's dispose() leaves the element and instance registered in Bootstrap's internal component data map. Pages that render many toasts, especially through repeatedly loaded fragments, therefore retain every dismissed notification until navigation even though the nodes are no longer visible; dispose the instance before removing the element.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread sqlpage/sqlpage.js
Comment thread sqlpage/sqlpage.js
@lovasoa
lovasoa force-pushed the ajouter-un-composant-toast branch 2 times, most recently from abf80a8 to 4a19843 Compare August 2, 2026 21:11

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4a198433be

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread sqlpage/templates/toast.handlebars Outdated
@lovasoa
lovasoa force-pushed the ajouter-un-composant-toast branch from 4a19843 to 7addb7a Compare August 2, 2026 21:27

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7addb7a2c6

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread sqlpage/sqlpage.js Outdated
Comment thread sqlpage/templates/toast.handlebars Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ce29643a97

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread sqlpage/sqlpage.js

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4d1ce5e24b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread sqlpage/sqlpage.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant